<template>
	<view class="col">
		<view class="top col">
			<HeaderVue></HeaderVue>
			<view class="head row-between-center">
				<view class="row-w-center">
					<view class="avater">
					</view>
					<view class="col-center-start" style="margin-left: 24rpx;">
						<view class="name">
							张三
						</view>
						<view class="mobile">
							13012341234
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="account col">
			<view class="row-h-center" style="height: 80rpx;margin-left: 31rpx;">
				<image src="/static/images/account.png" class="account-logo"></image>
				<view class="account-name">
					我的账户
				</view>
			</view>
			<view class="account2  ">
				<view class="row-start" >
					<view class="col">
						<view class="account-text">
							总佣金
						</view>
						<view class="account-all">
							200.00
						</view>
					</view>
					<view class="col" style="margin-left: 100rpx;">
						<view class="account-text">
							可提现余额
						</view>
						<view class="account-withdraw">
							200.00
						</view>
					</view>
				</view>
				<view class="row-between-center" style="margin-top: 41rpx;">
					<view class="account-btn1 row-center" @click="goWithdrawList()">
						提现记录
					</view>
					<view class="account-btn1 row-center" @click="goMoneyList()">
						佣金明细
					</view>
					<view class="account-btn2 row-center" @click="goWithdraw()">
						提现
					</view>
				</view>
			</view>

		</view>

		<view class="all col">
			<view class="item row-between-center" v-for="item,index in list"
				 @click="goItem(item)">
				<view class="row-h-center">
					<image :src="'/static/images/'+item.image+'.png'" class="img"></image>
					<view class="key">{{item.name}}</view>
				</view>
				
				<image src="/static/images/arrow.png" class="arrow" style="margin-right: 36rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderVue from '../../../components/Header.vue'
	export default {
		components: {
			HeaderVue
		},
		data() {
			return {
				list: [{
						'image':'mine_1',
						'name': '我的收藏',
						'path': '/src/pages/my/collects'
					},
					{
						'image':'mine_2',
						'name': '设置提现银行账号',
						'path': '/src/pages/my/bank_card'
					},
					{
						'image':'mine_3',
						'name': '协议管理'
					},
					{
						'image':'mine_4',
						'name': '平台客服',
						'path': '/src/pages/my/service'
					}
				]
			}
		},
		methods: {
			goItem(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			goMoneyList(){
				uni.navigateTo({
					url: '/src/pages/my/money_list'
				})
			},
			goWithdraw(){
				uni.navigateTo({
					url: '/src/pages/my/withdraw'
				})
			},
			goWithdrawList(){
				uni.navigateTo({
					url: '/src/pages/my/withdraw_list'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F4F3F8;
	}
</style>
<style lang="scss" scoped>
	.top {
		background: linear-gradient(180deg, #91B3FB 0%, rgba(145, 179, 251, 0) 100%);
		width: 100%;
	}

	.back {}

	.title {
		color: #FFF;
		text-align: center;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 48rpx;
	}

	.head {
		margin: 43rpx;

		.avater {
			background-color: red;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.name {
			color: #17161B;
			font-size: 41rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 58rpx;
		}

		.mobile {
			color: #17161B;
			font-size: 25rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 42rpx;
		}
	}

	.account {
		margin: 31rpx 31rpx 0 31rpx;
		background: #0C7CFC;
		border-radius: 25rpx;
	}

	.account2 {
		padding: 31rpx;
		width: 100%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #FFFFFF 100%);
		border-radius: 25rpx 25rpx 0 0;
	}

	.account-text {
		font-weight: 400;
		font-size: 25rpx;
		color: #7B7A80;
		line-height: 42rpx;
	}

	.account-all {
		margin-top: 10rpx;
		font-weight: bold;
		font-size: 38rpx;
		color: #02AD69;
		line-height: 54rpx;
	}

	.account-withdraw {
		margin-top: 10rpx;
		font-weight: bold;
		font-size: 38rpx;
		color: #02AD69;
		line-height: 54rpx;
	}

	.account-btn1 {
		width: 158rpx;
		height: 75rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 2rpx solid #0D59D1;
		font-weight: 400;
		font-size: 25rpx;
		color: #0D59D1;
		line-height: 42rpx;
	}

	.account-btn2 {
		width: 267rpx;
		height: 75rpx;
		background: #0D59D1;
		border-radius: 10rpx;
		font-weight: 500;
		font-size: 25rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}

	.account-logo {
		width: 45rpx;
		height: 45rpx;
	}

	.account-name {
		margin-left: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 29rpx;
		color: #FFFFFF;
		line-height: 46rpx;
	}

	.all {
		margin: 31rpx 31rpx 0 31rpx;
		background: linear-gradient( 180deg, #FFECE5 0%, #FFFFFF 27%, #FFFFFF 100%);
		border-radius: 25rpx ;
		.item {
			height: 100rpx;
			.img{
				margin-left: 31rpx;
				width: 50rpx;
				height: 50rpx;
			}
			.arrow{
				width: 41rpx;
				height: 41rpx;
			}
			.key {
				margin-left: 36rpx;
				color: #000;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 40rpx;
			}
		}
	}
</style>